<!--
 * @author Santa Antilles
 * @description
 * @date 2023/12/28-03:20:21
 * -->
<template>
  <Menu/>
  <div class="survey-write-wrapper" v-loading="pageLoading">
    <el-row>
      <el-col :span="6"></el-col>
      <el-col :span="12" style="display: flex; align-items: center; justify-content: center">
        <div class="survey-content">
          <SurveyItem v-for="item in surveyData"
                      :survey-id="item.surveyId"
                      :survey-line="item.surveyLine"
                      :survey-item-id="item.surveyItemId"
                      @selection-change="handleSelectionChange"/>
          <div class="content-bottom-button">
            <el-button type="primary" size="large" @click="submitSurvey">确认提交</el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
  </div>
</template>

<script setup>
import SurveyItem from "../../components/SurveyItem.vue";
import Menu from "../../components/Menu.vue"
import {useRoute} from "vue-router";
import {getLocalStorage, KEY_USER_ID } from "../../utils/localStorge.js";
import {insertIntoNewSubmit, querySurveyItem} from "../../web-api/main/survey.js";
import {ElMessage} from "element-plus";
import router from "../../router/index.js";

let surveyId = useRoute().params.surveyId;
// let userId = getLocalStorage(KEY_USER_ID);
let userId = "1738147240233230337"
// 数据模拟
let surveyData = ref([
  // {surveyLine: "ceshiceshi", surveyId, surveyItemId: "2ejsd"},
  // {surveyLine: "ceshiceshi", surveyId, surveyItemId: "2e0sd"},
  // {surveyLine: "ceshiceshi", surveyId, surveyItemId: "2epsd"},
  // {surveyLine: "ceshiceshi", surveyId, surveyItemId: "2elsd"},
  // {surveyLine: "ceshiceshi", surveyId, surveyItemId: "2eksd"}
])

// 提交问卷
const submitSurvey = ()=>{
  let key = Object.keys(surveyResult.value);
  if(key.length<surveyData.value.length){
    ElMessage.error("请完成问卷！");
    return
  }
  let ret = []
  key.map(item=>{
    surveyResult.value[item]["userId"] = userId;
    ret.push(surveyResult.value[item])
    if(surveyResult.value[item]>5||surveyResult.value[item]<1){
      ElMessage.error("请输入合法的值！")
      return
    }
  })
  console.log(ret)
  insertIntoNewSubmit(ret).then(res=>{
    ElMessage.success("提交成功，即将返回！");
    setTimeout(()=>{

    }, 1500)
    router.push("/index")
  })
}

let surveyResult = ref({})
let pageLoading = ref(false)

const handleSelectionChange = (args)=>{
  surveyResult.value[args[2]] = {
    userId,
    surveyId: args[1],
    score: args[0],
    surveyItemId: args[2]
  }
  console.log(surveyResult.value)
}

const requestSurveyItems = ()=>{
  pageLoading.value = true
  querySurveyItem(surveyId).then(res=>{
    surveyData.value = res.data;
    console.log(res.data)
    console.log(surveyData.value)
    pageLoading.value = false
  })
}

onBeforeMount(()=>{
  requestSurveyItems();
})

</script>

<style scoped>
.survey-content{
  position: relative;
}
.content-bottom-button{
  display: flex;
  align-items: center;
  justify-content: right;
}
::v-deep button{
  margin: 20px !important;

}
</style>